写一个静态网站，每个网站中都有相同的头部和尾部，为了避免粘贴复制的重复操作，想到几个方法：

1.使用框架 angular.js vue.js或者模块化开发 （但是这个静态网站没有什么复杂的功能，引入框架有些大题小做 pass）

2.前端服务器上开启ssi  （服务器是 Linux 没有开启 ssi  pass）

   这里有详细的介绍

3.使用iframe 把页面拆分为多个 然后引入 （当想要用iframe的时候 脑海里总是跳出n个不用iframe的理由 pass）

      这个是用了layui框架的 首页 将头部和底部  内容区域 进行变换

对应变换iframe的src进行页面的跳转

’‘

4.使用js加载引入 

  在公共的js中添加

$('header').load("head.html");$('footer').load("foot.html");

　　每个页面的结构均为

 

这里说一下 需要写一个nav.js用来控制 跳转页面后 导航栏的状态改变（当然不止这一种方法）

function init(){    var link=['index','about','delop','new','recruit','contact']；//这个为你页面名称，顺序和导航到对应，这里二级目录会用关键字 eg:newDetails新闻详情     var keyword;    for(var i=0;i<=link.length-1;i++){        keyword=window.location.href.lastIndexOf(link[i])        if(keyword>=0){            change(i)            return null        }    }}function change(key){//改变导航栏状态    $('.nav>li').eq(key).addClass('on').siblings().removeClass('on')}

这样就可以快速实现 前端的模块化 但是有缺陷 首页也做成这样的话 搜索引擎不会抓取到导航以及底部的链接点 不利于seo 

以后有好的方法会继续完善。。。